<template>
  <div class="main-container">
    <div class="title">
      <div class="title-top">
        <h2>初中毕业综合素质评价报告</h2>
        <p>
          <dropdownYear 
          v-if="isMobile"
          :dropdownQuery="dropdownQuery"
          />
          2021-2024学年
        </p>
      </div>
      <!-- <el-select v-model="selectedYear" class="m-2 " placeholder="请选择" size="large"  v-if="!isMobile">
        <el-option v-for="item in dropdownQuery" :key="item.value" :label="item.label" :value="item.value" />
      </el-select> -->
    </div>
    <el-card class="box-card stu-info-card" id="stu-info-card" shadow="hover">
      <div class="card-content">
        <div class="card-top">
          <div class="card-header-item">
            <span>学生姓名</span>
            <h3>{{ cardStuInfo.xm }}</h3>
          </div>
          <div class="card-header-item">
            <span>所在班级</span>
            <h3>{{ cardStuInfo.grade }}</h3>
          </div>
          <div class="card-header-item">
            <span>学籍号</span>
            <h3>202103008</h3>
          </div>
          <div class="card-header-item">
            <span>班主任</span>
            <h3>{{ cardStuInfo.bzr }}</h3>
          </div>
          <div class="card-header-item">
            <span>报告生成时间</span>
            <h3>{{ cardStuInfo.time }}</h3>
          </div>
        </div>
      </div>
    </el-card>

    <el-card class="box-card stu-info-card" shadow="hover">
      <div class="card-content">
        <!-- 这里可以添加卡片内容 -->
        <div class="card-content-left">
          <h2>本学期综合评价等级</h2>
        </div>
        <div class="card-content-right">
          <h2>A</h2>
          <span>优秀</span>
        </div>
      </div>
    </el-card>

    <cardContent
      :termPerformance="termPerformance"
    />

    <cardContent
      :termPerformance="totalPerformance"
    />

    <cardContent :termPerformance="academicPerformance" />


    <cardContent :termPerformance="teacherComment" />

      <semereport
      v-if="reportView"
      v-model:visible="reportView"
      :listrow="cardStuInfo"
      :itemsXQ="itemsXQ"
    />

    <div class="submit" style="text-align: right;">
          <el-button type="default" solid @click="printReport">
            <el-icon><list /></el-icon>
            打印报告
          </el-button>
          <el-button type="primary" solid>
            <el-icon class="el-icon--right"><Download /></el-icon>
            下载报告
          </el-button>
    </div>
  </div>
</template>

<script setup>
// 可以添加必要的导入和逻辑
import { ref, reactive } from 'vue';
import dropdownYear from '@/components/dropdownYear.vue';
import cardContent from '@/components/card-content.vue';
import { getTermPJ,getSummaryPJ }  from '@/api/home';
import  semereport from '@/components/semereport.vue';
import { useStore } from "@/store";
const store = useStore();
const homeStore = store.home;
// 状态管理
const isMobile = ref(false)

// 检测设备类型
const checkDeviceType = () => {
  const width = window.innerWidth
  isMobile.value = width < 768 // 768px为断点
}

const cardStuInfo = reactive({
  xm: '张三',
  grade: '初二（3）班',
  bzr: '王老师',
  time: '2024-05-01',
  bjpm: 8,
  total: 45,
})

let selectedYear = ref('');
let optionsYear = reactive([])
let student_id = ref('');
let  dropdownQuery = reactive([
  {
    value: '2023-2024',
    label: '2023-2024学年 春季学期'
  },
  {
    value: '2024-2025',
    label: '2024-2025学年 秋季学期'
  }
])

//打印报告
let reportView = ref(false)

let printReport = () => {
  reportView.value = true
}


// 学期表现概括数据
let termPerformance = reactive({
  title: '个人陈述',
  data:[
  {
    title: '毕业自我总结与展望',
    content: `时光飞逝，三年的初中生活即将画上句号。回首这三年，我收获颇丰，不仅在学业上取得了进步，更在品德修养、社会实践和个人能力等方面得到了全面发展。

在学习上，我始终保持着积极的态度，尤其是在数学和物理学科上找到了自己的兴趣和优势。我养成了课前预习、课后复习的好习惯，遇到难题时会主动向老师和同学请教。虽然英语曾是我的薄弱环节，但通过不懈努力，初三时已经有了明显进步。

担任班级干部的经历让我受益匪浅，它培养了我的责任感、组织能力和沟通能力。我学会了如何平衡学习与工作，如何协调同学关系，如何在压力下完成任务。这些宝贵的经验将对我未来的学习和生活产生深远影响。

我积极参与各类志愿服务和社会实践活动，从敬老院慰问到社区环保行动，每一次经历都让我对社会有了更深刻的认识，也让我懂得了奉献的意义。在体育方面，长跑是我的特长，它不仅锻炼了我的体魄，更培养了我坚持不懈、挑战自我的精神。

当然，我也清楚地认识到自己的不足，比如艺术素养有待提高，时间管理能力仍需加强。在即将到来的高中生活中，我会继续发扬自己的优势，努力弥补不足，争取在各个方面都能取得更大的进步。

感谢老师们三年来的辛勤教导和同学们的帮助支持。初中毕业不是结束，而是新的开始。我会带着这份收获和感悟，以更加饱满的热情迎接未来的挑战，努力成为一名对社会有用的人。`,
    icon: 'user',
    color: '#eff6ff',
    time:'2024-05-01',
  }
]
})

// 三年综合素质发展趋势
let totalPerformance = reactive({
  title: '三年综合素质发展趋势',
  data:[
  {
    title: '初一年级',
    content: '整体表现良好，适应能力强，数学学科开始展现优势，积极参与班级活动。', 
    icon: 'user',
    color: '#eff6ff',
    time:'2024-05-01',
  },
    {
    title: '初二年级',
    content: '进步明显，担任班级干部，责任感增强，学业成绩稳步提升，获得校级表彰。', 
    icon: 'user',
    color: '#f0fdf4',
    time:'2024-08-01',
  },
    {
    title: '初三年级',
    content: '综合表现优秀，学科优势明显，组织能力突出，在各项评价中均取得良好成绩。', 
    icon: 'user',
    color: '#ffffff',
    time:'2025-05-01',
  },
]
})

// 学业成绩分析
let academicPerformance = reactive({
  title:'学业成绩分析',
  columns: [
    {
      prop: 'xk',
      label: '学科',
      width: '160'
    },
    {
      prop: 'qz',
      label: '期中成绩',
      width: '100'
    },
    {
      prop: 'qm',
      label: '期末成绩',
      width: '120'
    },
    {
      prop: 'bjage',
      label: '班级平均分',
      width: '100'
    },
    {
      prop: 'dj',
      label: '等级',
      width: '100'
    }
  ],
  data:[
  {
    xk: '语文',
    qz: 82,
    qm: 85,
    bjage: 80,
    dj: '良好',
  },
  {
    xk: '数学',
    qz: 92,
    qm: 95,
    bjage: 90,
    dj: '优秀',
  },
  {
    xk: '英语',
    qz: 78,
    qm: 80,
    bjage: 75,
    dj: '良好',
  },
]
})


//学期表现记录
let termPerformanceRecord = reactive({
  title:'学期表现记录',
  data:[
    {
      title:'奖励与荣誉',
      data:[{
        title: '校级优秀学生干部',
        content: '2023-2024学年春季学期被评为校级优秀学生干部',
      },{
        title: '校级优秀学生',
        content: '2023-2024学年春季学期被评为校级优秀学生',
       }
      ]
    },
    {
      title:'重要活动参与',
      data:[{
        title: '校运动会1000米',
        content: '2023-2024学年春季学期参与了重要活动',
      },{
        title: '校运动会歌唱比赛',
        content: '2023-2024学年春季学期参与了重要活动',
      }
      ]
    }
  ]
})

//班主任评语与建议
let teacherComment = reactive({
  title:'班主任评语与建议',
  data:[
  {
    title: '李老师',
    bzr:'初二(3)班班主任',
    time: '2024-05-01',
    content: '张三同学本学期表现优秀，在思想品德、学业成绩和班级工作中都取得了显著进步。作为班级干部，能够以身作则，热心为同学服务，得到了师生的一致好评。在学习上，该生态度端正，勤奋刻苦，尤其在数学学科表现突出，展现了较强的逻辑思维能力。英语学科进步明显，值得肯定。若能在历史学科上多下功夫，查漏补缺，相信能取得更好的成绩。希望该生继续保持良好的发展势头，在保持学业优势的同时，积极发展艺术特长，全面提升综合素质，为未来的学习和成长打下坚实基础。',
    icon: 'user',
    color: '#f9fafb',
  }
]
})




// 初始化
onMounted(async () => {
  checkDeviceType()
  window.addEventListener('resize', checkDeviceType)
  student_id.value = JSON.parse(sessionStorage.getItem('token')).student_id
  //学期赋值
  optionsYear = toRaw(homeStore.semesterInfo)
  selectedYear.value = optionsYear[0].SEMESTER_ID
  // 学期评价和综合评价用到的数据
  await homeStore.getTermPJAndSummaryData(selectedYear.value, '2')
  //学期评价
  await homeStore.getTermPJData(selectedYear.value, '2',student_id.value)
})

// 清理
onUnmounted(() => {
  window.removeEventListener('resize', checkDeviceType)
})




</script>

<style scoped lang="scss">
.main-container {
  max-width: 1450px;
  margin: 0px auto;
  padding: 10px;

  .stu-info-card {
    margin: 20px 0;
    border: 0;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 15px;
    margin: 20px auto;

    .card-top {
      display: flex;
      align-items: center;
      justify-content: space-between;

    }

    .card-content {
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: space-between;
      border-radius: 10px;

      .card-header-item,
      .card-content-left {
        display: flex;
        flex-direction: column;

        span {
          font-size: 14px;
          color: #6d7584;
          margin-bottom: 10px;
        }

        h2 {
          font-size: 18px;
          font-weight: 800;
          margin: 10px 0;
        }

        h3 {
          font-weight: 500;
        }
      }

      .card-content-right {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 20px 30px;
        border-radius: 10px;

        background-color: #e7eeff;

        h2 {
          font-size: 28px;
          font-weight: 800;
          margin: 0;
          color: #165dff;
        }
      }

    }
  }

  #stu-info-card {
    width: 60%;
    padding: 20px;
    border: 0;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
    border-radius: 15px;
    margin: 10px auto;

    .card-content {
      align-items: normal;
    }
  }


  .title {
    max-width: 1420px;
    margin: 0 0 20px 0;
    position: relative;

    .title-top {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    p{
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 15px;
    }

    .el-select {
      position: absolute;
      top: 0;
      left: 0;
      width: 250px;
    }


    h2 {
      font-size: 22px;
      font-weight: 800;
      margin: 10px 0;
    }
  }

  .xqbx {
    margin: 10px 0;

    .box-card {
      border-radius: 10px;

      ::v-deep .el-card__header {
        border-bottom: 0px;
      }

      .card-content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 30px;

        /* 子元素之间的间距为20px（水平方向） */
        .card-content-item {
          display: flex;
          align-items: flex-start;
          flex-direction: column;
          justify-content: space-between;
          background-color: #eff6ff;
          padding: 20px;
          border-radius: 20px;

          div:nth-child(1) {
            margin: 10px 0;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            gap: 10px;

            .el-icon {
              padding: 20px;
              border-radius: 50%;
              background-color: #c3d8ff;
            }
          }
        }
      }
    }
  }
}

/* 移动端适配 */
@media screen and (max-width: 768px) {
  .main-container {
    .title {
      max-width: 100%;
      margin: 0 0 20px 0;

      .title-top {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;

        .el-select {
          width: 100%;
        }
      }
    }

    .box-card {
      .card-top {
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;

        .card-header-item {
          margin: 10px 0;
          text-align: center;

          h2 {
            margin: 0;
          }

          span {
            margin-bottom: 5px;
          }
        }
      }
    }

    .xqbx {

      .box-card {

        .card-content {
          display: flex;
          flex-direction: column;
          gap: 10px;

          .card-content-item {
            width: 100%;
          }
        }
      }
    }

    #stu-info-card{
      width: 100%;
    }
  }
}
</style>
